<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 1. Promise, 为什么需要它
        // 1.1 回调地狱
        // 1.2 代码不好维护
        // 1.3 代码不好阅读
        // 1.4 代码不好测试
        // 1.5 Promise的出现, 解决了以上问题
        // 1.6 Promise是一个对象, 代表一个异步操作的最终完成或失败
        // 1.7 三种状态: pending(进行中), fulfilled(已成功), rejected(已失败)
        // 1.8 两个特点: 状态不可逆, 一旦状态改变, 就不会再变
        // 1.9 两个方法: then(成功时调用), catch(失败时调用)
        // 1.10 两个属性: resolve(成功时调用), reject(失败时调用)
        // 1.11 Promise的链式调用
        // 1.12 Promise.all() 和 Promise

        // // 2. Promise的基本使用
        // // 2.1 创建一个 Promise 对象
        // const promise = new Promise((resolve, reject) => {
        //     // 异步操作
        //     setTimeout(() => {
        //         resolve('成功');
        //         // reject('失败');
        //     }, 2000);
        // });
        // // 2.2 调用 resolve() 或 reject() 方法
        // promise.then((value) => {
        //     console.log(value);
        // }).catch((error) => {
        //     console.log(error);
        // });

        // // 3. 使用 promise 消除回调地狱
        // // 3.1 封装延迟函数
        // function delay(time,n) { // time 是延迟时间, n 是返回的值
        //     return new Promise((resolve) => {
        //         setTimeout(() => {
        //             resolve(n);
        //         }, time);
        //     });
        // }
        // // 3.2 链式调用消除回调地狱
        // delay(1000, 1).then((n) => {
        //     console.log(n);
        //     return delay(1000, 2);
        // }).then((n) => {
        //     console.log(n);
        //     return delay(1000, 3);
        // }).then((n) => {
        //     console.log(n);
        // });

        // 4. async 和 await
        // 4.1 async 是一个关键字, 用于声明一个异步函数
        // 4.2 await 是一个关键字, 用于暂停异步函数的执行, 等待 Promise 对象的状态发生改变

        // 5. async 和 await 的基本使用
        // 5.1 async 函数返回一个 Promise 对象
        function delay(time, n) { // time 是延迟时间, n 是返回的值
            return new Promise((resolve) => {
                setTimeout(() => {
                    resolve(n);
                }, time);
            });
        }

        async function main() {
            // 1、在Promise实例前添加 await 关键字, 那么await的返回值就是当前 Promise 的 resolve 参数
            // 2、await所在的函数必须被 async 修饰
            // 3、async 函数内, 当前 await 执⾏结束了,代码才会继续往后执⾏(同步的⽅式执⾏）
            console.log(1);
            let n1 = await delay(1000, 1);
            console.log(n1);
            let n2 = await delay(1000, 2);
            console.log(n2);
            let n3 = await delay(1000, 3);
            console.log(n3);
        }
        main();

    </script>
</body>

</html>